<template>
	<view class="container">
		<uni-group title="日期" top="0">
			<button @click="showDrawerBeginDay" type="default" size="mini">{{selectBeginDay}}</button><button disabled="true"
				plain="true" type="default" size="mini" style="margin-left: 10rpx;border:#FFFFFF">VS</button><button
				@click="showDrawerEndDay" type="default" size="mini" style="margin-left: 10rpx;">{{selectEndDay}}</button>
		</uni-group>
		<uni-group title="排行" top="20">
			<view>
				<uni-tag text="战力" size="small" @click="tagClick(0)" :type="tagType[0]"></uni-tag>
				<uni-tag text="阵亡" size="small" @click="tagClick(1)" :type="tagType[1]"></uni-tag>
				<uni-tag text="T5击杀" size="small" @click="tagClick(2)" :type="tagType[2]"></uni-tag>
				<uni-tag text="T4击杀" size="small" @click="tagClick(3)" :type="tagType[3]"></uni-tag>
				<uni-tag text="T3击杀" size="small" @click="tagClick(4)" :type="tagType[4]"></uni-tag>
				<uni-tag text="T2击杀" size="small" @click="tagClick(5)" :type="tagType[5]"></uni-tag>
				<uni-tag text="T1击杀" size="small" @click="tagClick(6)" :type="tagType[6]"></uni-tag>
			</view>
			<view style="padding-top: 30rpx;">
				<uni-easyinput placeholder="输入搜索昵称" maxlength="11" :value="keyName" @input="bindInput"></uni-easyinput>
			</view>
			<view style="padding-top: 30rpx;">
				<uni-table border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" style="width: 5%;">排名</uni-th>
						<uni-th align="center" style="width: 10%;">昵称</uni-th>
						<uni-th align="center" style="width: 25%;">{{splitDate(selectBeginDay)}}</uni-th>
						<uni-th align="center" style="width: 25%;">{{splitDate(selectEndDay)}}</uni-th>
						<uni-th align="center" style="width: 35%;">数值</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in rank" v-bind:key="item.gameId">
						<uni-td align="center">{{index+1}}</uni-td>
						<uni-td align="center"><text v-for="(item2, index2) in item.nickname"
								:class="item2 == keyName ? 'searchHigh' : '' ">{{item2}}</text></uni-td>
						<uni-td align="center">{{fmoney(item.beginValue)}}</uni-td>
						<uni-td align="center">{{fmoney(item.endValue)}}</uni-td>
						<uni-td align="center">{{fmoney(item.value)}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</uni-group>

		<uni-drawer ref="drawer">
			<scroll-view style="height: 100%;padding: 10rpx;" scroll-y="true">
				<view v-if="day.length==0">
					没有可用日期
				</view>
				<view v-else>
					<button v-for="(item, index) in day" @click="{{closeDrawer(item)}}" type="default" size="mini"
						style="margin-left: 10rpx;">{{item}}</button>
				</view>
			</scroll-view>
		</uni-drawer>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message" :value="popupMessage">
				<uni-popup-message :type="popupMessage.msgType" :message="popupMessage.messageText" :duration="1000">
				</uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
	export default {
		data() {
			return {
				keyName: null,
				unionId: '',
				server: '',
				selectBeginDay: '选择',
				selectEndDay: '选择',
				tagType: ['default', 'default', 'default', 'default', 'default', 'default', 'default'],
				day: [],
				rank: [],
				selectTag: 0,
				witchDay:'',
				popupMessage: {
					type: 'center',
					msgType: 'success',
					messageText: '这是一条成功提示',
					value: ''
				},
			}
		},
		onLoad: function(option) {
			this.unionId = option.unionId
			this.serverId = option.serverId
			uni.request({
				url: getApp().globalData.url + '/api/stat/getHasDataDay?serverId=' +
					this.serverId,
				header: {
					'content-type': 'application/json',
					'token': getApp().globalData.token
				},
				success: (res) => {
					if (res.data.code == "00000") {
						this.day = res.data.data
					}
				}
			});
		},
		methods: {
			showDrawerBeginDay() {
				this.$refs.drawer.open();
				this.witchDay='BeginDay'
			},
			showDrawerEndDay() {
				this.$refs.drawer.open();
				this.witchDay='EndDay'
			},
			closeDrawer(day) {
				if (this.witchDay == 'BeginDay') {
					this.selectBeginDay = day
				} else if (this.witchDay == 'EndDay') {
					this.selectEndDay = day
					this.reload();
				}
				this.$refs.drawer.close();
			},
			tagClick(index) {
				let that = this
				that.selectTag = index;
				that.reload();
			},
			reload(){
				let that = this
				var index = that.selectTag
				if (that.selectBeginDay != '选择' && that.selectEndDay != '选择') {
					if (this.tagType[index] == "default") {
						this.$set(this.tagType, index, "primary")
					} else {
						this.$set(this.tagType, index, "default")
					}
					for (var i = 0; i < this.tagType.length; i++) {
						if (i != index) {
							this.$set(this.tagType, i, "default")
						}
					}
					let type = "CurrentPower";
					switch (index) {
						case 0:
							type = "CurrentPower"
							break
						case 1:
							type = "Death"
							break
						case 2:
							type = "T5Kill"
							break
						case 3:
							type = "T4Kill"
							break
						case 4:
							type = "T3Kill"
							break
						case 5:
							type = "T2Kill"
							break
						case 6:
							type = "T1Kill"
							break
					}
					uni.request({
						url: getApp().globalData.url + '/api/stat/getStatCompare',
						header: {
							'content-type': 'application/json',
							'token': getApp().globalData.token
						},
						method: "POST",
						data: {
							"type": type,
							"serverId": this.serverId,
							"beginDate": this.selectBeginDay,
							"endDate": this.selectEndDay
						},
						success: (res) => {
							if (res.data.code == "00000") {
								this.rank = res.data.data
							} else {
								that.popupMessage.msgType = "error"
								that.popupMessage.messageText = res.data.msg
								that.$refs.message.open()
							}
						}
					});
				} else {
					that.popupMessage.msgType = "info"
					that.popupMessage.messageText = "请先选择时间"
					that.$refs.message.open()
				}
			},
			fmoney(s) {
				var isNegative = false
				var str = s.toString()
				if (str.startsWith("-")) {
					str = str.replace("-", "")
					isNegative = true
				}
				var l = str.split("").reverse()
				var t = ""
				for (var i = 0; i < l.length; i++) {
					t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "")
				}
				if (isNegative) {
					return "-" + (t.split("").reverse().join(""))
				} else {
					return t.split("").reverse().join("")
				}

			},
			splitDate(day) {
				var d = day.toString()
				if (d == '选择') {
					return '日期'
				} else {
					return d.substring(0, 4) + "/" + d.substring(4, 6) + "/" + d.substring(6, 8)
				}

			},
			bindInput: function(e) {
				var that = this;
				that.keyName = that.trim(e)
				that.searchTap();
			},
			searchTap: function() {
				var that = this;
				var data = that.rank;
				if (that.keyName != '') {
					for (var i = 0; i < data.length; i++) {
						var dic = data[i];
						var text = dic["nickname"];
						if (Array.isArray(text)) {
							dic["nickname"] = getInf(text.join(""), that.keyName);
						} else {
							dic["nickname"] = getInf(text.toString(), that.keyName);
						}
					}
				}
			},
			trim: function(s) {
				return s.replace(/(^\s*)|(\s*$)/g, "");
			}
		},
		onShareAppMessage: function(options) {
			var that = this;
			var shareObj = {
				path: '/pages/menu/menu'
			};
			return shareObj;
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	uni-tag {
		margin: 10rpx;
	}
	.searchHigh {
		font-weight: bold;
		color: #409eff;
	}
</style>
